<template>
  <view class="list-container">
    <scroll-view scroll-y="true" style="height: calc(100%- 44px - 61px)">
      <uv-cell-group>
        <uv-cell
          :title="`${type === 'day' ? '日' : '月'}推广订单：${item.num}单（￥${item.totalmoney}）`"
          clickable
          :name="item.day"
          v-for="(item, index) in list"
          :key="index"
        >
          <template v-slot:value>
            <uv-text type="info" size="13" align="right" :text="item[type]"></uv-text>
          </template>
        </uv-cell>
      </uv-cell-group>
      <uv-skeletons
        v-for="(_, index) in Array(10)"
        :key="index"
        :loading="loading"
        :skeleton="skeleton"
      ></uv-skeletons>
      <uv-empty v-if="isNotEmpty" mode="list" :icon="empty" width="220"></uv-empty>
    </scroll-view>
    <pagination :data="pageInfo" @page="changePage"></pagination>
  </view>
</template>

<script setup>
  import { onMounted, getCurrentInstance,ref,reactive  } from 'vue'
  import empty from '@/static/empty.png'
  import pagination from '@/components/pagination.vue'

	const { appContext } = getCurrentInstance()
	const REQUEST = appContext.config.globalProperties.$http

  const props = defineProps({
    pid: {
      type: String,
      default: undefined
    },
    type: {
      type: String,
      default: 'month'
    }
  })

  const list = ref()
  const loading = ref(false)
  const isNotEmpty = ref(false)
  const pageInfo = reactive({
    total: 0,
		per_page: 0,
		last_page: 0,
		current_page: 1
  })
  const skeleton = [
    {
      type: 'line',
      num: 1,
      gap: '20rpx',
      style: ['height: 100rpx;margin-bottom: 10px']
    }
  ]

  const changePage = (val)=> {
    pageInfo.current_page = val
    channelUserCount()
  }

  const channelUserCount = ()=> {
    REQUEST.http("masterchannel/index/channelOrderCount", {
      page: pageInfo.current_page,
      pid: props.pid,
      type: props.type
    },"POST").then(res=>{
      list.value = res.data.data
      isNotEmpty.value = res.data.total === 0

      pageInfo.total = res.data.total
      pageInfo.per_page = res.data.per_page
      pageInfo.last_page = res.data.last_page
      pageInfo.current_page = res.data.current_page
    })
  }

  onMounted(()=>{
    channelUserCount()
  })
</script>

<style lang="scss" scoped>
  .list-container {
    height: calc(100% - 44px - 61px);
    overflow: scroll;
  }
</style>
